<template>
  <view>
    <u-navbar :title="$t('编辑个人资料')"></u-navbar>
    <view class="box">
      <u-cell-group>
        <u-cell-item
          :title="$t('头像')"
          :arrow="true"
          @click="upImg">
          <image
            slot="right-icon"
            class="head"
            :src="headImg"
            mode=""></image>
        </u-cell-item>
      </u-cell-group>
    </view>
    <uni-popup
      ref="popup"
      type="top"
      heigth="200">
      <view class="qweqwe"
        >{{$t('申请相册权限')}}</view
      >
    </uni-popup>
    <view class="box">
      <u-cell-group>
        <u-cell-item
          :arrow="false"
          title="ID"
          :value="userId"></u-cell-item>
        <u-cell-item
          :arrow="false"
          :title="$t('手机号码')"
          :value="userInfo.mobile || ''"></u-cell-item>
      </u-cell-group>
    </view>

    <view class="box">
      <u-cell-group>
        <u-cell-item
          :title="$t('昵称')"
          :value="mobile"
          @click="$.to('./editInfo?state=1')"></u-cell-item>
        <!-- <u-cell-item title="电子邮箱" :value="userInfo.email" @click="$.to('./editInfo?state=2')"></u-cell-item> -->
        <!-- <u-cell-item title="性别" :value="gender" @click="gendershow = true"></u-cell-item> -->
        <!-- <u-cell-item title="生日" :value="time" @click="timeshow = true"></u-cell-item> -->
      </u-cell-group>
    </view>

    <u-action-sheet
      :list="genserlist"
      :safe-area-inset-bottom="true"
      @click="editgender"
      v-model="gendershow"></u-action-sheet>
    <u-picker
      v-model="timeshow"
      mode="time"
      confirm-color="#2AC2B3"
      :confirm-text="$t('保存')"
      @confirm="confirmtime"></u-picker>
  </view>
</template>

<script>
import permision from "@/js_sdk/wa-permission/permission.js";
export default {
  data() {
    return {
      genserlist: [
        {
          text: this.$t('男'),
        },
        {
          text: this.$t('女'),
        },
      ],
      gendershow: false,
      timeshow: false,
      gender: this.$t('未设置'),
      time: this.$t('未设置'),
      headImg: "",
      userInfo: "",
      mobile: "",
	  userId: "",
    };
  },
  onShow() {
    if (uni.getStorageSync("user")) {
      this.getUser();
    } else {
		uni.redirectTo({
			url: "/pages/my/login"
		})
	}
  },
  onUnload() {
    uni.$emit("updataUser");
  },
  computed: {
    // userId(value) {
    //   return 80000 + parseInt(value) || "";
    // },
  },
  methods: {
    getUser() {
      this.userInfo = uni.getStorageSync("user");
      this.mobile = this.userInfo.mobile.replace(
        /(\d{3})\d{4}(\d{4})/,
        "$1****$2"
      );
      this.headImg = this.userInfo.image;
      // this.gender = this.userInfo.gender == 0 ? '女':'男'
      // this.time = this.userInfo.birthday || "未设置"
	  this.userId = 80000 + parseInt(this.userInfo.id) || ""
      console.log(this.userInfo);
    },
    // 修改性别
    editgender(val) {
      this.gender = this.genserlist[val].text;
      var gen = this.gender == "女" ? "0" : "1";
      this.$http({
        url: "api/member/changeInfo",
        data: {
          gender: gen,
        },
      })
        .then((res) => {
          console.log(res);
          if (res.data.code == 1) {
            this.$tip.tip(this.$t('修改成功'));
          } else {
            this.$tip.tip(res.data.msg);
          }
        })
        .catch((err) => {});
    },
    confirmtime(val) {
      this.time = val.year + "-" + val.month + "-" + val.day;
      this.$http({
        url: "api/user/change_info",
        data: {
          birthday: this.time,
        },
      })
        .then((res) => {
          console.log(res);
          if (res.data.code == 1) {
            this.$tip.tip(this.$t('修改成功'));
          } else {
            this.$tip.tip(res.data.msg);
          }
        })
        .catch((err) => {});
    },
    // 上传头像
    async upImg() {
      //#ifdef APP-PLUS
      let value = uni.getStorageSync("is_CAMERA");
      if (value != 1) {
        this.$refs.popup.open();
      }
      await this.requestAndroidPermission("android.permission.CAMERA");
      //#endif
      uni.chooseImage({
        count: 1,
        sourceType: ["album", "camera"],
        success: (res) => {
          uni.showLoading({
            title: this.$t('图片上传中'),
          });
          this.uploadImage(res.tempFilePaths);
        },
      });
    },
    async requestAndroidPermission(permisionID) {
      var result = await permision.requestAndroidPermission(permisionID);
      var strStatus;
      if (result == 1) {
        strStatus = "已获得授权";
        this.$refs.popup.close();
      } else if (result == 0) {
        strStatus = "未获得授权";
      } else {
        strStatus = "被永久拒绝权限";
      }
      uni.setStorageSync("is_CAMERA", result);
      return result;
    },
    uploadImage(tempFilePaths) {
      console.log(tempFilePaths);
      let _this = this;
      uni.uploadFile({
        url: this.$baseUrl.baseUrl + "api/upload/upload", //接口地址
        filePath: tempFilePaths[0],
        name: "file",
        formData: {
          uid: this.userInfo.id,
        },
        success: (res) => {
          let data = JSON.parse(res.data);
          if (data.code == 1) {
            this.headImg = data.file;
            uni.hideLoading();
            this.upData(data.file);
          } else {
            this.$tip.tip(data.msg);
          }
        },
      });
    },
    upData(url) {
      this.$http({
        url: "api/member/change_info",
        data: {
          image: url,
        },
      })
        .then((res) => {
          console.log(res);
          if (res.data.code == 1) {
            this.$tip.tip(this.$t('修改成功'));
            uni.setStorageSync("user", res.data.data);
            uni.$emit("updataUser");
          } else {
            this.$tip.tip(res.data.msg);
          }
        })
        .catch((err) => {});
    },
  },
};
</script>

<style>
page {
  background-color: #f3f8fc;
}

.box {
  background-color: #fff;
  margin: 20rpx auto;
  border-radius: 16rpx;
}

.head {
  width: 75rpx;
  height: 75rpx;
  border-radius: 50%;
}
.qweqwe {
  background-color: #fff;
  width: 100%;
  color: #000;
  margin-top: 25%;
  padding: 20rpx;
  box-sizing: border-box;
}
</style>
